<template>
  <div id="header">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-icon @click="ShrinkClick">
        <fold v-if="!props.shrink" />
        <svg
          viewBox="0 0 1024 1024"
          xmlns="http://www.w3.org/2000/svg"
          data-v-ba633cb8=""
          v-else
        >
          <path
            fill="currentColor"
            d="M128 192h768v128H128V192zm0 256h512v128H128V448zm0 256h768v128H128V704zm576-352 192 160-192 128V352z"
          ></path>
        </svg>
      </el-icon>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="item in breadcrumb" :key="item.path">{{
          item.meta.title
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 个人信息 -->
    <div class="info">
      <!-- 切换后台颜色 -->
      <div class="brush icon" @click="switchBGColor">
        <el-icon v-if="bgcColor.backgroundColor === '#212130'"
          ><moon
        /></el-icon>
        <el-icon v-if="bgcColor.backgroundColor === '#fff'"><sunny /></el-icon>
      </div>
      <!-- 消息提醒 -->
      <el-badge
        class="item"
        :is-dot="
          !(
            (userInfo.systemUnread ||
              userInfo.festivalUnread ||
              userInfo.appointmentUnread) <= 0
          )
        "
      >
        <div class="bell icon">
          <el-icon @click.stop="switchBell"><bell /></el-icon>
        </div>
        <div
          class="show"
          v-show="isShowMes"
          @click.stop
          :style="{
            backgroundColor:
              bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)'
          }"
        >
          <div class="scrollView">
            <!-- 有消息 -->
            <template v-if="state.messageList.length">
              <template v-for="item in state.messageList" :key="item._id">
                <div class="list">
                  <div class="title">
                    <!-- 系统消息 -->
                    <template v-if="item.constType === 0">
                      <svg
                        t="1650354751565"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="5785"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                          fill="#FF9E39"
                          p-id="5786"
                        ></path>
                        <path
                          d="M526.9248 284.544l-127.6928 89.1392h-65.0752c-34.688 0-65.024 30.848-65.024 69.4016v137.8304c0 38.5536 27.9296 69.376 65.024 69.376h65.0752l130.5856 89.1648c17.8432 7.7056 32.768 0 32.768-20.224v-414.464c-2.8928-20.224-17.3312-27.9296-35.6608-20.224zM624.2816 595.3536a26.88 26.88 0 0 1-17.8432-7.2192c-5.2992-4.8128-7.2192-11.5712-7.2192-17.8432 0-6.7328 2.8928-13.4912 7.2192-17.8176 10.1376-11.0848 15.9232-24.576 15.9232-39.5264 0-14.9248-5.2992-28.416-15.9232-39.5008a25.5744 25.5744 0 0 1 17.8432-43.3664c6.272 0 13.0048 2.8928 17.8176 7.68a106.368 106.368 0 0 1 30.848 75.6736 108.032 108.032 0 0 1-30.848 75.6736c-4.8128 3.3536-11.0848 6.2464-17.8176 6.2464z"
                          fill="#FFFFFF"
                          p-id="5787"
                        ></path>
                        <path
                          d="M703.7952 660.9152c-9.1648 11.0848-24.0896 11.0848-33.2544 0a31.1808 31.1808 0 0 1 0-39.04c23.1424-26.496 37.5808-64.1024 37.5808-105.0624s-14.4384-78.08-37.5808-105.0368a31.1808 31.1808 0 0 1 0-39.04c9.1648-11.0848 24.0896-11.0848 33.2544 0 31.7952 36.608 51.072 87.7056 51.072 143.616 0.512 56.832-19.7376 107.4432-51.072 144.5632z"
                          fill="#FFFFFF"
                          p-id="5788"
                        ></path></svg
                    ></template>
                    <template v-else-if="item.constType === 1">
                      <svg
                        t="1650354882911"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="6127"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M458.5 512h73.6l-73.6 147.2c0 7.4 6 13.4 13.4 13.4h26.8c7.4 0 13.4-6 13.4-13.4l80.3-160.6v-13.4c0-14.8-12-26.8-26.8-26.8H458.5c-14.8 0-26.8 12-26.8 26.8s12 26.8 26.8 26.8zM378.2 297.9H405v53.5h-26.8z"
                          fill="#FFB871"
                          p-id="6128"
                        ></path>
                        <path
                          d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m267.6 699.3c0 29.6-24 53.5-53.5 53.5H297.9c-29.6 0-53.5-24-53.5-53.5V404.9h535.3v294.4z m0-321.1H244.4v-26.8c0-29.6 24-53.5 53.5-53.5h56.2c5.6-15.5 20-26.8 37.4-26.8s31.9 11.2 37.4 26.8h166c5.6-15.5 20-26.8 37.4-26.8s31.9 11.2 37.4 26.8h56.2c29.6 0 53.5 24 53.5 53.5v26.8z"
                          fill="#FFB871"
                          p-id="6129"
                        ></path>
                        <path
                          d="M619.1 297.9h26.8v53.5h-26.8z"
                          fill="#FFB871"
                          p-id="6130"
                        ></path></svg
                    ></template>
                    <template v-else-if="item.constType === 2">
                      <svg
                        t="1650355098454"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="6792"
                        width="64"
                        height="64"
                      >
                        <path
                          d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                          fill="#F69B47"
                          p-id="6793"
                        ></path>
                        <path
                          d="M724.352 311.68c30.08 0 54.784 21.824 54.784 48.64v347.968c0 26.688-24.576 48.64-54.784 48.64H321.92c-30.08 0-54.784-21.824-54.784-48.64V360.192c0-26.688 24.576-48.512 54.784-48.512h402.432z m-136.704 37.952a133.12 133.12 0 0 0-133.568 133.76c0 74.112 59.392 133.376 133.568 133.376a132.992 132.992 0 0 0 133.568-133.568 133.056 133.056 0 0 0-133.568-133.568z m-239.104 56.64c-9.472 0-17.024 9.792-17.024 18.752 0 8.96 7.68 19.392 17.024 19.392h60.16c9.344 0 17.024-10.432 17.024-19.392 0-8.96-7.68-18.752-17.024-18.752h-60.16zM344.96 531.84c-7.424 0-13.504 9.92-13.632 18.752 0 8.96 6.208 19.392 13.632 19.392h85.952c7.616 0 13.632-10.432 13.632-19.392 0-8.96-6.208-18.752-13.632-18.752H345.024z m352.448 160.832c9.984 0 18.24-10.432 18.24-19.392 0-8.96-8.32-18.752-18.24-18.752H348.8c-9.984 0-18.24 9.792-18.24 18.752 0 8.96 8.256 19.392 18.24 19.392h348.672zM581.568 512c-13.44 0-25.024-8.896-25.024-19.072v-50.88c0-10.24 11.648-19.072 24.96-19.072 13.44 0 25.088 8.832 25.088 19.072V486.4h66.88c9.92 0 16.64 5.12 16.64 12.8 0 7.68-6.72 12.736-16.64 12.736H581.568z"
                          fill="#FFFFFF"
                          p-id="6794"
                        ></path></svg
                    ></template>
                    <span v-conversion-mes>{{ item.constType }}</span>
                  </div>
                  <div class="des">
                    {{ item.title }}
                  </div>
                </div>
              </template>
            </template>
            <!-- 无消息 -->
            <template v-else>
              <div class="empty">
                <i class="iconfont icon-kongzhuangtai"></i>
                <span>暂无信息</span>
              </div>
            </template>
          </div>
          <div class="showMore" @click="rourerToMessage">查看更多</div>
        </div>
      </el-badge>
      <!-- 用户详情 -->
      <UserInfo></UserInfo>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  defineProps,
  defineEmits,
  ref,
  reactive,
  computed,
  onMounted,
  watch
} from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter, RouteLocationMatched } from 'vue-router'
import { ArrowRight, Fold, Bell, Moon, Sunny } from '@element-plus/icons-vue'
import cache from '@/utils/cache'
import { UserInfo } from './index'
import type {
  UserInfoVuexTypes,
  UserInfoMessageListTypes
} from '@/server/serve/api_admintor'

interface PropsTypes {
  shrink: boolean
}
const props = defineProps<PropsTypes>()
const emits = defineEmits(['tapShrink'])
const store = useStore()
const route = useRoute()
const router = useRouter()

// 面包屑
const breadcrumb = ref<Array<RouteLocationMatched>>()
watch(
  () => route.path,
  () => {
    breadcrumb.value = route.matched.filter((item) => item.meta.title)
  },
  { immediate: true }
)

// 切换缩放状态
const ShrinkClick = () => {
  emits('tapShrink', !props.shrink)
}

// 获取背景颜色
const bgcColor = computed(() => store.state.Background)

// 获取用户信息
const userInfo = computed({
  get: () => store.state.userInfo as UserInfoVuexTypes,
  set: () => {}
})

// 消息列表
const state = reactive({
  messageList: [] as Array<UserInfoMessageListTypes>
})
watch(
  () => userInfo.value,
  (newVal) => {
    userInfo.value = newVal
    state.messageList = userInfo.value?.messageList?.reverse() ?? []
  }
)

state.messageList = userInfo.value?.messageList?.reverse() ?? []

// 切换背景颜色
const switchBGColor = () => {
  store.commit('switchBGColor')
  // 将当前的颜色存入 local
  cache.setItem('bgcColor', bgcColor.value)
}

// 是否显示消息列表
const isShowMes = ref<boolean>(false)

// 切换显示消息列表
const switchBell = () => {
  isShowMes.value = !isShowMes.value
}

// 切换消息
const rourerToMessage = () => {
  isShowMes.value = false
  router.push('/admin/message/system')
}

onMounted(() => {
  document.addEventListener(
    'click',
    () => {
      isShowMes.value = false
    },
    false
  )
})
</script>

<style scoped lang="less">
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  .breadcrumb {
    height: 30px;
    display: flex;
    align-items: center;
    .el-icon {
      margin-right: 10px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      svg {
        width: 100%;
        height: 100%;
      }
    }
  }
  .info {
    height: 30px;
    display: flex;
    align-items: center;
    .icon {
      margin-right: 20px;
      .el-icon {
        cursor: pointer;
      }
    }
    // 切换颜色
    .brush {
      position: relative;
    }
    // 消息提示
    .el-badge {
      width: 16px;
      height: 16px;
      margin-right: 20px;
      position: relative;
      z-index: 1000;
      .is-dot {
        border: none !important;
      }
      .show {
        position: absolute;
        width: 200px;
        max-height: 300px;
        border-radius: 8px;
        box-shadow: 0px 0px 6px rgb(148, 145, 145);
        box-sizing: border-box;
        padding: 10px 15px;
        transform: translateX(-50%);
        top: 30px;
        padding-bottom: 40px;
        user-select: none;
        .scrollView {
          flex: 1;
          overflow: auto;
          max-height: 250px;
          &::-webkit-scrollbar {
            /*设置滚动条整体属性*/
            width: 5px;
          }
          &::-webkit-scrollbar-track {
            /*滚动条轨道属性*/
            background-color: transparent;
          }
          &::-webkit-scrollbar-thumb {
            /*滚动条内滑块属性*/
            /* background-color: pink; */
            background-size: 100% 100%; /*如果用背景图，这里要带上，不然背景图不能顶到头*/
            /*我用的背景图尺寸是5*75的*/
          }
          // 空状态
          .empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 160px;
            justify-content: space-evenly;
            color: #959699;
            font-size: 14px;
            i {
              font-size: 50px;
            }
          }
          .list {
            border-bottom: 1px solid #e3e5e7;
            padding-bottom: 10px;
            .title {
              display: flex;
              font-size: 14px;
              align-items: center;
              margin-top: 10px;
              svg {
                width: 20px;
                height: 20px;
                margin-right: 10px;
              }
            }
            .des {
              margin-top: 8px;
              font-size: 12px;
              color: #969ba0;
              line-height: 1.7em;
              // text-indent: 2em;
              box-sizing: border-box;
              // padding-left: 2em;
              white-space: normal; //使文本可以多行显示
              text-overflow: ellipsis; //使多余的部分用省略号来代替
              overflow: hidden; //隐藏多余的部分
              display: -webkit-box; //浮动布局
              -webkit-line-clamp: 2; //显示的行数
              -webkit-box-orient: vertical; //垂直排列
            }
          }
        }
        .showMore {
          position: absolute;
          font-size: 12px;
          bottom: 0;
          width: 180px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #969ba0;
          cursor: pointer;
          user-select: none;
          border-top: 1px solid #dcdee1;
          padding-top: 10px;
          &:hover {
            color: #f56c6c;
          }
        }
      }
    }
  }
}
</style>
